<template>
    <div class="container">
        <!-- 标题栏 -->
        <myNav></myNav>
        <!-- logo -->
        <myLogoArea></myLogoArea>
        <!-- centerNav -->
        <div class="centerNav">
            <ul>
                <li class="left">我的AllChinaBuy</li>
                <li class="home"><a href="#">首页</a></li>
            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="contentContent">
            <div class="leftNav">
                <ul>
                    <li v-for="(item, index) in leftMenu" :key="index" @click="toLink(item)"
                        :class="LeftMenuActive == item ? 'leftMenuActiveStyle' : ''">{{ item }}</li>
                </ul>
            </div>

            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import myNav from '@/components/myHome/myNav'
import myLogoArea from '@/components/myHome/myLogoArea'

export default {
    name: "",
    components: {
        myNav,
        myLogoArea
    },
    data() {
        return {
            activeIndex: '1',
            menuList: ["全部",
                "待付款",
                "订购中",
                "待确认/补款",
                "已发货入库",
                "售后"
            ],
            menuActive: '',  // 橙色菜单点击样式的显示
            // orderNum: 0,
            leftMenu: ["购物车", "我的订单", "我的仓库", "我的包裹", "我的资产", "我的咨询", "站内信", "商品收藏", "账户设置"],
            LeftMenuActive: ''

        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        // 切换右侧窗口
        toLink(value) {
            // 只是显示左侧的活动样式
            this.LeftMenuActive = value;

            // 跳转
            if(value == '我的订单') {
                this.$router.push('/mySetPage/myOrder')
            } else if(value == '商品收藏') {
                this.$router.push('/mySetPage/myProductCollect')
            }else if(value == '站内信') {
                this.$router.push('/mySetPage/myLetter')
            }
        }

    }
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;


    .centerNav {
        height: 50px;
        width: 90%;
        // background-color: red;
        margin: 0 auto;
        border-bottom: solid 1px rgb(241, 241, 241);

        ul {
            display: flex;

            .left {
                display: inline-block;
                width: 190px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: #00bebf;
                color: #fff;
                font-size: 20px;
                font-style: italic;
                cursor: pointer;
            }

            .home {
                line-height: 50px;
                padding: 0 5px;
                margin-left: 50px;
                font-style: 18px;
                color: #00bebf;
                font-weight: 700;
                cursor: pointer;

                a {
                    display: inline-block;
                    border-bottom: solid 5px #00bebf;
                }
            }
        }
    }

    .contentContent {
        width: 90%;
        margin: 0 auto;
        // background-color: red;
        height: 400px;
        margin-top: 30px;

        display: flex;

        .leftNav {

            width: 168px;
            border: 1px solid #eee;
            padding: 20px 0px 20px 0;
            margin-bottom: 40px;
            background: #fff;

            li {
                line-height: 33px;
                cursor: pointer;
                text-indent: 20px;
                font-size: 14px;
                color: black;
                transition: color 0.1s ease;
                font-weight: bold;


                &:hover {
                    background-color: #00bebf;
                    color: #fff;

                }
            }

            .leftMenuActiveStyle {
                background: rgb(238, 238, 238);
            }
        }

        
    }
}
</style>